<template>
	<main-container>
		<el-card>
			<template #header>
				<div>
					<span>文件存储配置</span>
				</div>
			</template>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
				<el-form-item label="文件存储类型" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio label="1">阿里云OSS</el-radio>
						<el-radio label="2">七牛云</el-radio>
						<el-radio label="3">腾讯COS</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-row>
					<el-col :span="12" class="mb20">
						<el-form-item label="AccessKey" prop="accessKey">
							<el-input v-model="form.accessKey"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" class="mb20">
						<el-form-item label="AccessKeySecret" prop="accessSecret">
							<el-input v-model="form.accessSecret"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" class="mb20">
						<el-form-item label="endpoint" prop="endpoint">
							<el-input v-model="form.endpoint"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" class="mb20">
						<el-form-item label="bucket" prop="bucket">
							<el-input v-model="form.bucket"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" class="mb20">
						<el-form-item label="指定文件夹" prop="dir">
							<el-input v-model="form.dir" placeholder="文件存放的文件夹、默认material"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<span class="hx-card-footer">
					<el-button type="primary" @click="submitForm(formRef)" :loading="loading">保 存</el-button>
					<el-button @click="resetForm(formRef)">重 置</el-button>
				</span>
			</el-form>
		</el-card>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { getObj, editObj } from '/@/api/upms/storageconfig';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
export default defineComponent({
	setup() {
		const data = reactive({
			form: { type: '', accessKey: '', accessSecret: '', endpoint: '', bucket: '', dir: '' },
			rules: {
				type: [
					{
						required: true,
						message: '请选择文件存储类型',
						trigger: 'change',
					},
				],
				accessKey: [
					{
						required: true,
						message: '请输入AccessKey',
						trigger: 'change',
					},
				],
				accessSecret: [
					{
						required: true,
						message: '请输入AccessKeySecret',
						trigger: 'change',
					},
				],
				endpoint: [
					{
						required: true,
						message: '请输入endpoint',
						trigger: 'change',
					},
				],
				bucket: [
					{
						required: true,
						message: '请输入bucket',
						trigger: 'change',
					},
				],
			},
		});
		const loading = ref(false);
		const formRef = ref();
		const initConfig = () => {
			loading.value = true;
			getObj()
				.then((response: any) => {
					loading.value = false;
					data.form = response.data.data;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 修改配置
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					editObj(data.form)
						.then((response: any) => {
							ElMessage.success('保存成功');
							loading.value = false;
						})
						.catch(() => {
							loading.value = false;
						});
				}
			});
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			loading.value = false;
			formEl.resetFields();
		};
		initConfig();
		return {
			loading,
			formRef,
			submitForm,
			resetForm,
			...toRefs(data),
		};
	},
});
</script>
<style lang="scss" scoped></style>
